﻿﻿import React, { useState, useEffect } from 'react'
import { Table, Tag, Modal, Card, Space, Switch, Button, Form, Input, Checkbox, DatePicker, TimePicker, Upload, message, Image } from 'antd';
import { getlist, deel, search, bianji } from '@/api/index';
const { Search } = Input;
function onChange(checked) {
  console.log(`switch to ${checked}`);
}

const AddListlzc = (props) => {
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',

    },
    {
      title: '砍价图片',
      dataIndex: "img",
      render: img => <img style={{ width: 55, height: 55 }} src={img} alt="" />
    },
    {
      title: '砍价价格',
      dataIndex: "price",
    },
    {
      title: '名称',
      dataIndex: 'user',
    },
    {
      title: '状态',
      dataIndex: 'caozuo',
      render: tags => (
        <>
          <Switch defaultChecked onChange={onChange} />
        </>
      ),
    },
    {
      title: '结束时间',
      dataIndex: 'times',
    },
    {
      title: '操作',
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => { showModal(record) }}>
            编辑
      </Button>
          <Button onClick={() => { del(record.id) }}>删除</Button>
          
        </Space>
      ),
    },
  ];

  //渲染数据
  const [shopdata, setshopdata] = useState([])
  useEffect(() => {
    getShopList()
  }, [])
      // 获取全部的数据
  const getShopList = () => {
    getlist().then(res => {
      console.log(res)
      setshopdata(res.data)
    })
  }
  const [user, setuser] = useState("")
  const [price, setprice] = useState("")
  const [times, settimesi] = useState("")
  const [img, setimg] = useState('')
  const [pass, setpass] = useState('')
  const [num, setnum] = useState('')
  const [title, settitle] = useState('')
  const [numi, setnumi] = useState('')
  const [id, setid] = useState('')
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = (item) => {
    
    setIsModalVisible(true);

    setprice(item.price)
    setuser(item.user)
    settimesi(item.times)
    setid(item.id)
    setimg(item.img)
    setpass(item.pass)
    setnum(item.num)
    settitle(item.title)
    setnumi(item.numi)
    console.log(item)
  };

  const handleOk = () => {
    setIsModalVisible(false);
    bianji({ user, price, times, img, pass, num, numi, title, id }).then(res => {
      console.log(res)
      getShopList()
    })
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  //删除数据
  const del = (id) => {
    console.log(id)
    deel({ id }).then(res => {
      console.log(res)
      getShopList()
    })
    //删除成功提示
    message.success('删除成功！');
  }
  // 跳转页面
  const add = () => {
    props.history.push("/main/addListlz")
  }
  //搜索数据
  // const sou = (e) => {
  //   const user = e.target.value
  //   //判断内容是否为空
  //   if (e.target.value === "") {
  //     //空 则 重新渲染
  //     getShopList()
  //   } else {
  //     //不为空就根据姓名进行搜索数据
  //     search({ user }).then(res => {
  //       console.log(res)
  //       setshopdata(res.data)
  //     })
  //   }
  //   //打印
  //   console.log(e.target.value)
  // }
  // 通过user来搜索
 const onSearch=(value)=>{
  search({user:value}).then(res=>{
    console.log(res)
    setshopdata(res.data)
  })
 }

  return (
    <div >
     
      <div>

        <Space direction="vertical">
          {/* <Input placeholder="请输入关键字" className="ipt"  onChange={(e) => sou(e)} /> */}
          <Search placeholder="搜索" onSearch={onSearch} style={{width:200}}></Search>
        </Space>,
<div>
<Button type="primary" onClick={add} style={{marginLeft:"20px",marginTop:"20px"}}>添加砍价商品</Button>
</div>

        </div>

      <div >
        <Table columns={columns} dataSource={shopdata} />

      </div>
      <div><Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>id：<Input value={id} onChange={(e)=>{setid(e.target.value)}} /></p>
        <p>砍价图片： <Input value={img} onChange={(e) => { setimg(e.target.value) }} /></p>
        <p>砍价商品名称：<Input value={user} onChange={(e) => { setuser(e.target.value) }} /></p>
        <p>联系电话：<Input value={title} onChange={(e) => { settitle(e.target.value) }} /></p>
        <p>时间：<Input value={times} onChange={(e) => { settimesi(e.target.value) }} /></p>
        {/* <p>限量：<Input value={num} onChange={(e) => { setnum(e.target.value) }} /></p>
        <p>成功砍价人数：<Input value={numi} onChange={(e) => { setnumi(e.target.value) }} /></p>
        <p>砍价价格：<Input value={price} onChange={(e) => { setprice(e.target.value) }} /></p>
      
        <p>评论：<Input value={pass} onChange={(e) => { setpass(e.target.value) }} /></p> */}

      </Modal></div>

    </div>
  )
}

export default AddListlzc

